<template>
    <vxe-table-column :field="column.prop" :title="column.label" :key="column.prop"
                      :type="column.type" :align="column.align" :header-align="column.headerAlign"
                      :width="column.width" :resizable="column.resizable" :class-name="column.className"
                      :show-overflow="column.tooltip" :visible="column.visible"
                      :min-width="column.minWidth || 80"
                      :fixed="column.fixed" :filters="column.filters" :filter-method="column.filterMethod"
                      :header-class-name="column.labelClassName"
                      :params="column" class="col" :ref="column.ref"
                      :edit-render="edit ? column.editRender : {}"
                      :selectable="column.selectable">
        <template v-slot:header v-if="column.renderHeader">
            <expand-dom :column="column" :render="column.renderHeader" :index="index" />
        </template>
        <template v-slot="scope" v-if="showTemplate">
            <template v-if="!column.render">
                <base-vxe-table-column-item :column="column" :scope="scope" :edit="edit" :index="index" />
            </template>
            <template v-else>
                <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index" />
            </template>
        </template>
    </vxe-table-column>
</template>

<script>
import BaseVxeTableColumnItem from "./BaseVxeTableColumnItem";

export default {
    name: "BaseVxeTableColumnRender",
    components: {
        BaseVxeTableColumnItem,
        expandDom: {
            functional: true,
            props: {
                row: Object,
                render: Function,
                index: Number,
                column: {
                    type: Object,
                    default: null,
                },
            },
            render: (h, ctx) => {
                const params = {
                    row: ctx.props.row,
                    index: ctx.props.index,
                };
                if (ctx.props.column) {
                    params.column = ctx.props.column;
                }
                return ctx.props.render(h, params);
            },
        },
        expandHeader: {
            functional: true,
            props: {
                row: Object,
                headerRender: Function,
                index: Number,
                column: {
                    type: Object,
                    default: null,
                },
            },
            render: (h, ctx) => {
                const params = {
                    row: ctx.props.row,
                    index: ctx.props.index,
                };
                if (ctx.props.column) {
                    params.column = ctx.props.column;
                }
                if (ctx.props.headerRender) {
                    return ctx.props.headerRender(h, params);
                } else {
                    return h("span", ctx.props.column.label);
                }
            },
        },
        popover: {
            functional: true,
            props: {
                content: Function,
                column: {
                    type: Object,
                    default: null,
                },
            },
            render: (h, ctx) => {
                return ctx.props.content(h, ctx.props.column);
            },
        },
    },
    props: {
        col: {
            type: Object,
            default() {
                return {};
            },
        },
        index: {
            type: Number,
            default() {
                return -1;
            },
        },
        edit: {
            type: Boolean,
            default() {
                return true;
            },
        },
    },
    data() {
        return {
            column: {},
            typeLst: [ 'checkbox', 'radio', ]
        };
    },
    watch: {
        col: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    computed: {
        showEditRender() {
            if (this.edit) {
                return typeof this.column.editRender !== 'undefined';
            }
            return false;
        },
        showTemplate() {
            let show = !this.column.editRender || !this.column.cellRender;
            if (this.column.type) {
                show = !this.typeLst.includes(this.column.type)
            }
            return show
        }
    },
    methods: {
        init() {
            this.column = $.extend({}, this.col);
            if (typeof this.column.label === "number") {
                this.column = $.extend({}, this.column, {
                    label: String(this.column.label),
                    tooltip: this.edit ? false : this.column.tooltip,
                });
            }
        },
        getElComp(column, row) {
            let elComp = undefined;
            if (row.elComp && row.elComp[column.prop]) {
                elComp = row.elComp[column.prop];
            }
            if (!elComp && column.elComp) {
                elComp = column.elComp;
            }
            if (elComp === "text") {
                return elComp;
            }
            if (!this.edit) {
                if (elComp && typeof elComp.formatter === "function") {
                    return {
                        elType: "text",
                        formatter: elComp.formatter,
                    };
                }
                return "text";
            }
            if (elComp) {
                if (elComp.integer === undefined) {
                    elComp.integer = false;
                }
                if (elComp.clearable === undefined) {
                    elComp.clearable = true;
                }
                if (elComp.size === undefined) {
                    elComp.size = "mini"; // 'small';
                }
                if (elComp.integer) {
                    elComp.double = false;
                }
                if (elComp.double === undefined) {
                    elComp.double = false;
                }
                if (elComp.type === "textarea" && elComp.autosize === undefined) {
                    elComp.autosize = { maxRows: 3 };
                }
            }
            return elComp;
        },
        filter(column, row) {
            return (
                !column.filter ||
                (typeof column.filter === "function" && column.filter(row))
            );
        },
        filterDisabled(column, row) {
            let elComp = this.getElComp(column, row);
            if (elComp.disabled) {
                return true;
            }
            if (typeof elComp.filterDisabled === "function") {
                return elComp.filterDisabled(row, column);
            }
            return false;
        },
        filterList(column, row, item) {
            let elComp = this.getElComp(column, row);
            return (
                !elComp.filterList ||
                (typeof elComp.filterList === "function" &&
                    elComp.filterList(row, column.prop, item))
            );
        },
    },
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
/deep/ .col {
    .col--checkbox,
    .col--seq {
        .vxe-cell {
            min-width: auto;
        }
    }
}

.baseTable {
    .vxe-table {
        .vxe-cell {
            min-width: 50px;
            padding-left: 0px;
            padding-right: 0px;
        }

        .col--checkbox,
        .col--seq {
            .vxe-cell {
                min-width: auto;
            }
        }
    }
}
</style>
